<template>
  <div id="add_menu_app">
    <el-dialog :title="formdata.id?'编辑角色':'新增角色'" :visible.sync="isShow.flag" width="50%">
      <el-form ref="form" :model="formdata" label-width="80px" :rules="rules">
        <el-form-item label="角色名称" prop="title">
          <el-input v-model="formdata.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
          :default-checked-keys="tree_list"
            :data="menuList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree_ref"
            highlight-current
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="角色状态" prop="status">
          <el-radio-group v-model="formdata.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      tree_list: [], 
      formdata: {
        rolename: "",
        menus: "",
        status: "",
      },
      defaultProps: {
        children: "children",
        label: "title",
      },
      rules: {
        rolename: {
          required: true,
          message: "角色名称不可以为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "角色状态不可以为空",
          trigger: "blur",
        },
      },
    };
  },
  props: ["isShow"],
  computed: {
    ...mapState("menu_model", ["menuList"]),
  }, 
  methods: {
    setData(obj){
    this.formdata = {...obj}
    this.tree_list =obj.menus.split(',')
  },
    submit(){
      var url ='';
      if(this.formdata.id){
        url ='/roleedit'
      }else{
        url= '/roleadd'
      }
      this.formdata.menus = this.$refs.tree_ref.getCheckedKeys().join(",")
      this.$axios.post(url,this.formdata).then(
            res=>{
                console.log(res)
            }
        )
        this.formdata = {
            rolename: "",
            menus: "",
            status: ""
        }
        this.$refs.tree_ref.setCheckedKeys([])
        this.isShow.flag = false
        this.$emit('reload')
    },
    ...mapActions("menu_model", ["menuListActions"]),
  },
  created() {
    this.menuListActions();
  },
};
</script>

<style>
</style>